<template>
    <div id="Ground">
        <router-view></router-view>
        <tab-bar ref="tabbar">
           <tabber-item @click.native ="itemClick($event)" to="recommend">
                <i class="iconfont">&#xe6a6;</i>
                <span>推荐</span>
           </tabber-item>
            <tabber-item @click.native="itemClick($event)" to="classification">
                <i class="iconfont">&#xe71b;</i>
                <span>分类</span>
           </tabber-item>
            <tabber-item @click.native="itemClick($event)" to="personalCenter">
                <i class="iconfont">&#xe65a;</i>
                <span>我的</span>
           </tabber-item>
        </tab-bar>
      
    </div>
</template>

<script>
import TabBar from '../components/TabBar.vue';
import TabberItem from "../components/TabberItem.vue"

export default {
  components: { TabBar,TabberItem },
    name: 'IndexHome',

    data() {
        return {
           
        };
    },

    mounted() {
      
    },

    methods: {
        

        itemClick(event){ 
            
             for (const item of  document.getElementsByClassName("TabberItem")) {
                item.className=event.currentTarget.className
             }
            event.currentTarget.className=event.currentTarget.className+" tabItem";
        }
    },
};
</script>

<style scoped>
 #Ground{
     background-image:radial-gradient(farthest-side at  -40% -200%,#9f19ae 3%,#FFF);
     width: 100vw;
     padding-bottom: 11vh;
    
 }
 .tabItem{
    color: #292cda;
 }
</style>